<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:修改组织组件
* @fileName:header-organization.vue
* @author:zoujunjie@yzbdl.ac.cn
* @date:2022-05-06
!-->
<template>
  <header-icon-item :icon-url="iconUser">
    <template v-slot:right>
      <div class="user-info">
        <lanius-tooltip
          :content="user.nickName || user.username"
          placement="bottom"
        >
          <div class="user-name text-ellipsis">
            {{ user.nickName || user.username }}
          </div>
        </lanius-tooltip>
        <el-dropdown
          @command="onOrganizationClick"
          popper-class="org-drop-down-container"
          trigger="click"
        >
          <div
            class="organization-name hover-cursor-pointer"
            v-if="currentOrganization"
          >
            <lanius-tooltip
              :content="currentOrganization?.orgName"
              placement="bottom"
            >
              <span class="text-ellipsis text">
                {{ currentOrganization?.orgName }}
              </span>
            </lanius-tooltip>
            <el-icon v-if="currentOrganization"><arrow-down /></el-icon>
          </div>

          <template #dropdown v-if="!isAdmin">
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="org in organizationList"
                :key="org.id"
                :disabled="org.frozen"
                :command="org.id"
              >
                <lanius-tooltip :content="org.orgName">
                  <span
                    class="text-ellipsis"
                    :class="
                      org.id == currentOrganization?.id ? 'color-primary' : ''
                    "
                    style="width: 140px"
                  >
                    {{ org.orgName }}</span
                  >
                </lanius-tooltip>
                <!-- <el-icon
                  class="el-icon--right"
                  v-if="org.id == currentOrganization?.id"
                  ><check
                /></el-icon> -->
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
  </header-icon-item>
</template>
<script setup lang="ts">
import { Check, ArrowDown } from "@element-plus/icons-vue";

import HeaderIconItem from "./header-icon-item.vue";
import iconUser from "@/assets/img/layout/header/icon-user.png";
import localTokenStrategy from "@/common/util/auth";
import { onMounted, Ref, ref, computed, ComputedRef } from "vue";
import { getAllOrganizations, changeOrganization } from "@/services/user";
import { isAdminRoute } from "@/services/common/context";
import { getMenuPermissions } from "@/services/user-permission";
import { useRoute } from "vue-router";

const user = localTokenStrategy.getUserInfo();
const route = useRoute();

const organizationList: Ref<any[]> = ref([]);
const currentOrganization: Ref<any> = ref(null);

const isAdmin: ComputedRef<boolean> = computed(() => {
  return isAdminRoute(useRoute());
});

onMounted(() => {
  if (!isAdmin.value) {
    getAllOrganizations()
      .then((r: any) => {
        organizationList.value = r;
        currentOrganization.value = r.find(
          (x: any) => user.organizationId == x.id
        );
      })
      .catch((err) => {
        console.log("err", err);
      });
  }
});

const onOrganizationClick = (organizationId: string) => {
  console.log("click", organizationId);
  changeOrganization(organizationId)
    .then((r: any) => {
      if (r) {
        localTokenStrategy.setToken(r.token);
        r.user.isChief = r.chief;
        r.user.isAdmin = false;
        r.user.organizationId = r.orgId;
        localTokenStrategy.setUserInfo(r.user);
        getMenuPermissions().then(() => {
          window.location.reload();
        });
      }
    })
    .catch((err) => {
      console.log("catch", err);
    });
};
</script>
<style scoped lang="scss">
.user-info {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}
.user-name {
  color: black;
  font-weight: bold;
  line-height: 20px;
  max-width: 140px;
}
.organization-name {
  line-height: 20px;
  display: flex;
  align-items: center;
  .text {
    max-width: 124px;
    margin-right: 8px;
  }
}
:global(.org-drop-down-container) {
  width: 160px;
}
:global(.org-drop-down-container .el-dropdown-menu__item) {
  padding: 10px;
  white-space: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
}
</style>
